/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<template>
  <div class="modal-box">
    <p class="title">
      <b class="left">资金分类(万元)</b>
    </p>
    <div class="main">
      <v-chart style="width: 100%; height: 100%;" auto-resize :options="options" theme="macarons" ref="chart" />
    </div>
  </div>
</template>
<script>
import ECharts from "vue-echarts";

const getChartOptions = data => {
  if (!data) return {};
  let total = 0;
  for (let i in data) {
    total += data[i];
  }
  let chartOptions = {
    grid: {
      top: "6%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c}户 ({d}%)"
    },
    legend: {
      //图例组件
      orient: "vertical", //布局  纵向布局 图例标记居文字的左边 vertical则反之
      left: "55%",
      top: "middle",
      itemWidth: 10, //图例标记的图形宽度
      itemHeight: 10, //图例标记的图形高度
      icon: "circle",
      data: ["补偿款", "项目经费", ],
      textStyle: {
        //图例文字的样式
        color: "#616161", //文字颜色
        fontSize: 12 //文字大小
      },
      formatter: function(name) {
        let present;
        switch (name) {
          case "补偿款":
            present = (total && ((data.buchang / total) * 100).toFixed(2))+ "%";
            return name + "  " + data.buchang / 10000 + "  " + present;
            break;
          case "项目经费":
            present = (total && ((data.laowu / total) * 100).toFixed(2)) + "%";
            return name + "  " + data.laowu / 10000 + "  " + present;
            break;
          default:
            break;
        }
      }
    },
    series: [{
      name: "资金分类",
      type: "pie",
      center: ["30%", "50%"],
      radius: ["75%", "90%"],
      hoverAnimation: false,
      label: {
        show: false
      },
      data: [
        { name: "补偿款", value: (data.buchang / 10000).toFixed(2) },
        { name: "项目经费", value: (data.laowu / 10000).toFixed(2) },
        {
          value: 0,
          name: "总量",
          label: {
            show: true,
            position: "center",
            formatter: function() {
              return "资金总额\n" + Math.round(total / 10000);
            },
            // fontWeight: "bold",
            fontSize: 12
          }
        }
      ]
    }]
  };
  return chartOptions;
};

export default {
  props: {
    moneyType: Object
  },
  data() {
    return {
      options: getChartOptions(this.moneyType)
    };
  },
  watch: {
    moneyType: function(data) {
      this.options = getChartOptions(data);
    }
  },
  components: {
    "v-chart": ECharts
  },
  mounted() {
    const self = this;
  }
};

</script>
<style lang='less' scoped>

  .main {
    width: 100%;
    height: 120px;
    position: relative;
  }


</style>
